<template>
  <div class="container" :style="'min-height: '+docheight+'px'">
    <div v-if="!showTimeOut&&showCont">
      <div class="homeBanner" v-if="homeData.shop_info">
        <div class="buyBanner">
          <swiper :auto="true" :show-dots="false" :interval="3000" dots-position="center">
            <swiper-item class="swiper-demo-img" v-for="(item, index) in bannerUser" :key="index">
              <div class="bannerUser">
                <img :src="item.img+ossSrc" @click="bannerFn(item)" />
                <div class="bannerUserDes">***客户{{ item.time }}分钟前完成了下单</div>
              </div>
            </swiper-item>
          </swiper>
        </div>
        <img :src="homeData.shop_info.shop_background_img+ossSrc" />
      </div>
      <div class="mainCont">
        <div class="shopMask" v-if="homeData.shop_info">
          <div class="shopMain">
            <div class="shopImg">
              <img :src="homeData.shop_info.shop_logo+ossSrc" />
            </div>
            <div class="shopInfo">
              <div class="shopName">
                <div class="shopNameVal">
                  <span style="color: #e95551;">{{ homeData.shop_info.shop_name }}</span>
                </div>
              </div>
              <div class="shopInfoUnder">
                <div class="desItem">
                  <span class="iconfont icon-24gl-phoneLoudspeaker"></span>
                  <span>{{ homeData.shop_info.shop_phone }}</span>
                </div>
                <div class="desItem">
                  <span class="iconfont icon-dizhi"></span>
                  <span>{{ homeData.shop_info.shop_address }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="shopDes">{{ homeData.shop_info.shop_introduce }}</div>
          <div class="couponList">
            <div :class="item.is_lq==1?'couponItem isGetTag':'couponItem'" @click="getCoup(item)" :key="index" v-for="(item,index) in couponArr">
              <div class="couponNei">
                <div v-if="item.is_lq==1" class="typeTagWai">
                  <div class="typeTag">已领</div>
                </div>
                <div class="couponLeft">
                  <div class="fullVal">满{{ item.full }}元可使用</div>
                  <div class="couponTime">
                    <div class="scaleTime">有效期至:{{ item.expiration_time }}</div>
                  </div>
                </div>
                <div class="couponRight">
                  <div class="reduceMoney">
                    <span>¥</span>
                    <span class="reduceText">{{ item.reduce }}</span>
                  </div>
                </div>
                <div class="couponRadio radioLeft"></div>
                <!-- <div class="couponRadio radioRight"></div> -->
              </div>
            </div>
          </div>
          <van-notice-bar
            class="notice"
            left-icon="volume-o"
            color="#e95551"
            background="#fff"
            :text="homeData.shop_info.shop_notice"
          />
        </div>
        <div class="mainList" v-if="homeData.new_goods_count&&homeData.new_goods_count>0">
          <div class="mainTitle">
            <span class="mainTitleName">上新啦</span>
            <span class="mainTitleDes">本次上新{{ homeData.new_goods_count }}个商品</span>
          </div>
          <div class="rowList">
            <div @click="goDetail(item)" :class="index==0?'rowItem noLeft':'rowItem'" :key="index" v-for="(item,index) in homeData.is_new">
              <div class="rowItemMain">
                <img :src="item.goods_image+ossSrc" />
                <div class="rowItemInfo">
                  <div class="rowName">{{ item.goods_name }}</div>
                  <div class="rowDes">{{ item.goods_describe }}</div>
                  <div class="rowPrice">
                    <div>¥ {{ item.goods_price }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mainList" v-if="homeData.hot_sales_goods&&homeData.hot_sales_goods.length>0">
          <div class="mainTitle">
            <span class="mainTitleName">热销排行榜</span>
          </div>
          <div class="cosList">
            <div @click="goDetail(item)" :class="index%3==0?'cosItem noLeft':'cosItem'" :key="index" v-for="(item,index) in homeData.hot_sales_goods">
              <div class="cosImg hasBorder">
                <img :src="item.goods_image+ossSrc" />
                <div class="sortNum">{{ index+1 }}</div>
              </div>
              <div class="cosItemInfo">
                <div class="cosName">{{ item.goods_name }}</div>
                
                <!-- <div class="cosDes">销量：3000+</div> -->
                <div class="cosPrice minPrice">
                  <div>¥ {{ item.goods_price }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mainList">
          <div class="mainTitle">
            <span class="mainTitleName">精选推荐</span>
            <span class="mainTitleDes">为您推荐热门美食～</span>
          </div>
          <div class="cosList maxCosList">
            <div class="maxCosItem" @click="goDetail(item)" :key="index" v-for="(item,index) in goodsArr">
              <div class="cosImg">
                <img :src="item.goods_image+ossSrc" />
                <div class="sortNum">{{ item.activity_name?item.activity_name:'精选' }}</div>
              </div>
              <div class="cosItemInfo">
                <div class="cosName">
                  {{ item.goods_name }}
                </div>
                <!-- <div class="cosDes">销量：3000+</div> -->
                <div class="cosPrice">
                  <div>¥ {{ item.goods_price }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="loadMore" v-if="goodsArr.length>0">{{ loadMoreText }}</div>
          <nodata v-if="goodsArr.length==0" text="暂无该类商品~"></nodata>         
        </div>
      </div>
      
    </div>
    <footcpm></footcpm>
    <getLoad v-if="!showCont"></getLoad>
    <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import footcpm from '@/components/footcpm'
import {userapi,coupon,receiveCoupon,goods} from "@/http/api";
import { Swiper,SwiperItem } from 'vux'
import nodata from '@/components/public/nodata'

import getLoad from '@/components/public/getLoad'
  import getTimeOut from '@/components/public/getTimeOut'
  import {Toast } from 'vux'

  export default {
    components: {nodata,Toast,getLoad,getTimeOut,footcpm,Swiper,SwiperItem},
    data() {
      return {
        showTimeOut:false,
        showCont:false,
        homeData:{},
        couponArr:[],
        showText:'',
        showToast:false,
        goodsArr:[],
        loadMoreText:'数据加载中~',
        last_page:0,
        page:1,
        per_page:10,
        getting:false,
        aspect:{},
        bannerUser:[
        ]
      }
    },
    props: {},
    methods:{
      goDetail(item){
        this.$router.push({path:'/detail',query:{id:item.goods_id}})
      },
      getCoup(item){
        let data = {
          coupon_id:item.coupon_id,
        }
        if(!this.showLoad){
          this.showLoad = true
          receiveCoupon(data).then((res)=>{
            if(res.data.code==1){
              this.showToast = true
              this.showText = '领取成功'
              this.getCoupon()
            }else{
              this.showToast = true
              this.showText = res.data.msg
            }
            this.showLoad = false
          }).catch(()=>{
            this.showLoad = false
            this.showToast = true
            this.showText = '网络请求超时'
          })
        }
      },
      getData(){
        userapi().then((res)=>{
          if(res.data.code==1){
            this.homeData = res.data.data
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
          this.showCont = true
        }).catch(()=>{
            this.showCont = true
            this.showTimeOut = true
          })
      },
      getCoupon(){
        let data = {}
        coupon(data).then((res)=>{
          if(res.data.code==1){
            this.couponArr = res.data.data
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
        }).catch(()=>{
        this.showTimeOut = true
        this.showCont= true
      })
      },
      getGoods(){
        let data ={
          page:this.page,
          per_page:this.per_page,
        }
        goods(data).then((res)=>{
          if(res.data.code==1){
            let arr = res.data.data.data
            for(let i=0;i<arr.length;i++){
              this.goodsArr.push(arr[i])
            }
            setTimeout(() => {
              this.getting = false
            }, 100);
            this.last_page = res.data.data.last_page
            if(this.page==this.last_page){
              this.loadMoreText = '到底啦～'
            }else{
              this.loadMoreText = '数据加载中~'
            }
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
          this.showCont= true
        }).catch(()=>{
            this.showTimeOut = true
            this.showCont= true
          })
      },
      nextfn(){
      if(this.$route.path=='/home'){
        let h = document.documentElement.scrollHeight||document.body.scrollHeight
        let wh = document.documentElement.clientHeight||document.body.clientHeight
        let top = document.documentElement.scrollTop||document.body.scrollTop
        let bottom = h-wh-top
        if(bottom<=50){
          if(this.getting==false){
            if(this.last_page>this.page){
              this.getting=  true
              this.page++
              this.getGoods()
            }
          }
        }
      }
    },
    setUser(){
      this.bannerUser = []
      for(let i = 1;i<=50;i++){
        let index = Math.round(Math.random() * 55) + 1
        let time = Math.round(Math.random() * 56) + 3
        this.bannerUser.push({img:'static/img/userImg/user'+index+'.png',time:time})
      }
      this.bannerUser = this.bannerUser.sort((a,b)=>{
        return a.time - b.time
      })
    },
    },
    mounted(){
      window.addEventListener('scroll',this.nextfn)
    },
    created() {
      this.getData()
      this.getGoods()
      this.getCoupon()
      this.setUser()
    },
  }
</script>

<style scoped lang="less">
.container {
  padding-bottom: 1.75rem;
  box-sizing: border-box;
  background-color: #f9f1f1;
  .homeBanner{
    width: 100%;
    font-size: 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    .buyBanner{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      .bannerUser{
        display: flex;
        align-items: center;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        font-size: 0.6rem;
        color: #fff;
        img{
          width: 1.5rem;
          border-radius: 50%;
          margin-right: 0.75rem;
        }
      }
    }
    img{
      width: 100%;
    }
  }
  .mainCont{
    width: 100%;
    top: -2rem;
    position: relative;
    // background-color: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    padding: 0 4%;
    box-sizing: border-box;
    .shopMask{
      box-sizing: border-box;
      border-radius: 0.75rem;
      width: 100%;
      padding: 0.75rem 4%;
      background-color: #fff;
      .shopMain{
        display: flex;
        .shopImg{
        width: 3rem;
        height: 3rem;
        font-size: 0;
        border: 0.15rem solid #e95551;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 0.75rem;
        img{
          width: 100%;
        }
      }
      .shopInfo{
        width: 1rem;
        flex: 1;
        height: 3.3rem;
        box-sizing: border-box;
        display: flex;
        padding-top: 0.15rem;
        flex-direction: column;
        justify-content: space-around;
        .shopName{
          font-size: 0.8rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .shopNameVal{
            flex: 1;
            width: 1rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 0.75rem;
          }
          .setBtn{
            font-size: 1rem;
            color: #e95551;
          }
        }
        .shopInfoUnder{
          color: #666;
          font-size: 0.6rem;
          .desItem{
            margin-top: 0.25rem;
            display: flex;
            align-items: center;
            .iconfont{
              margin-right: 0.25rem;
            }
          }
        }
      }
      }
      .shopDes{
        width: 100%;
        font-size: 0.6rem;
        color: #666;
        box-sizing: border-box;
        margin-top: 0.75rem;
      }
      .couponList{
        width: 100%;
        font-size: 0.6rem;
        margin: 0.5rem 0;
        box-sizing: border-box;
        // justify-content: space-between;
        overflow-x: auto;
        white-space: nowrap;
        // flex-wrap: wrap;
        .couponItem{
          width: 60%;
          display: inline-block;
          white-space: nowrap;
          border-radius: 0.25rem;
          padding: 0.25rem;
          box-sizing: border-box;
          position: relative;
          margin-right: 4%;
          background-color: #e95551;
          .couponNei{
            display: flex;
            background-image: linear-gradient(to right,#fef8ea,#fff);
            // background-color: #fff;
            position: relative;
            height: 2.3rem;
            box-sizing: border-box;
            overflow: hidden;
            .typeTagWai{
              font-size:0.6rem;
              height: 2.1rem;
              line-height: 3.5rem;
              position: absolute;
              top:-1rem;
              right: -2.5rem;
              background-color: #e95551;
              width: 5rem;
              text-align: center;
              transform: rotate(45deg);
              color: white;
              .typeTag{
                transform: scale(0.6);
              }
            }
            .couponRadio{
              position: absolute;
              width: 0.6rem;
              height: 0.6rem;
              top: 0.85rem;
              border-radius: 50%;
              background-color: #e95551;
            }
            .radioLeft{
              left: -0.3rem;
            }
            .radioRight{
              right: -0.3rem;
            }
            .couponLeft{
              width: 65%;
              border-right: 0.1rem dashed #e95551;
              padding: 0.1rem 0.45rem;
              box-sizing: border-box;
              color: #e95551;
              .fullVal{
                font-size: 0.6rem;
              }
              .couponTime{
                width: 100%;
                font-size: 0.6rem;
                background-color: #e95551;
                color: white;
                // transform: scale(0.5);
                color: white;
                padding: 0.1rem;
                box-sizing: border-box;
                margin-top: 0.15rem;
                display: inline-block;
                border-radius: 0.1rem;
                .scaleTime{
                  transform: scale(0.7);
                  position: relative;
                  left: -0.5rem;
                }
              }
            }
            .couponRight{
              width: 35%;
              padding-right: 0.5rem;
              display: flex;
              justify-content: center;
              align-items: center;
              .reduceMoney{
                color: #e95551;
                display: table-cell;
                font-size: 0.7rem;
                .reduceText{
                  font-size: 1rem;
                }
              }
            }
          }
        }
        .isGetTag{
          opacity: 0.7;
        }
      }
    }
    .mainList{
      width: 100%;
      margin-top: 0.75rem;
      margin-bottom: 1.25rem;
      background-color: #fff;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      border-radius: 0.75rem;
      .mainTitle{
        display: table-cell;
        padding-bottom: 0.75rem;
        .mainTitleName{
          font-size: 0.8rem;
          font-weight: bold;
          margin-right: 0.25rem;
        }
        .mainTitleDes{
          font-size: 0.6rem;
          color:#e95551;
        }
      }
      .rowList{
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        .rowItem{
          width: 60%;
          display: inline-block;
          white-space: nowrap;
          margin-left: 4%;
          .rowItemMain{
            width: 100%;
            display: flex;
            img{
              width: 3rem;
              border-radius: 0.25rem;
            }
            .rowItemInfo{
              width: 1rem;
              flex: 1;
              height: 3rem;
              padding: 0.05rem 0;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 0.5rem;
              .rowName{
                font-size: 0.7rem;
                font-weight: bold;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .rowDes{
                color: #999;
                font-size: 0.6rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .rowPrice{
                display: flex;
                align-items: center;
                color: #e95551;
                .svipTag{
                  // font-size: 0.6rem;
                  // background-color: #e95551;
                  // color: white;
                  // padding: 0.1rem 0.5rem;
                  // margin-right: 0.25rem;
                  // border-radius: 0.25rem;
                }
              }
            }
          }
        }
        .noLeft{
          margin-left: 0;
        }
      }
      .cosList{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .cosItem,.maxCosItem{
          width: 30%;
          margin-left: 5%;
          margin-bottom: 0.75rem;
          .cosImg{
            width: 100%;
            position: relative;
            border-radius: 0.25rem;
            overflow: hidden;
            font-size: 0;
            .sortNum{
              position: absolute;
              padding: 0.25rem 0.5rem;
              // font-size: 0.6rem;
              left: 0;
              font-size: 0.6rem;
              top: 0;
              background-color: #e95551;
              color: white;
              border-radius: 0 0 0.25rem 0;
            }
            img{
              width: 100%;
            }
          }
          .cosItemInfo{
            .cosName{
                width: 100%;
                margin-top: 0.25rem;
                margin-bottom: 0.25rem;
                font-size: 0.7rem;
                font-weight: bold;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .cosDes{
                color: #999;
                font-size: 0.6rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .cosPrice{
                display: flex;
                align-items: center;
                color: #e95551;
                .svipTag{
                  // font-size: 0.6rem;
                  // background-color: #e95551;
                  // color: white;
                  // padding: 0.1rem 0.5rem;
                  // margin-right: 0.25rem;
                  // border-radius: 0.25rem;
                }
              }
              .minPrice{
                font-size: 0.6rem;
              }
          }
          
        }
        .maxCosItem{
         width: 48%;
         margin-left: 0;
        }
        .noLeft{
          margin-left: 0;
        }
      }
      .maxCosList{
        justify-content: space-between;
      }
      .loadMore{
        text-align: center;
        padding: 0.75rem 0;
        font-size: 0.6rem;
        color: #e95551;
      }
    }
  }
}
</style>
<style >
.van-notice-bar{
  padding: 0;
  box-sizing: border-box;
}
</style>
